import { useState, useEffect } from 'react';
import { Table, Input, Button, Col, Row, Form, Pagination, message, DatePicker } from 'antd';
import styles from './index.module.scss'
import { useNavigate } from 'react-router-dom';
import { getRecords } from '@/service';
import { useTranslation } from 'react-i18next';
export default (props) => {
    const [messageApi, contextHolder] = message.useMessage();
    const { t, i18n } = useTranslation();
    const [form] = Form.useForm(); // 创建表单实例
    const initState = () => ({
        total: '',
        recordList: [],
        loading: false,
    }),
        navigate = useNavigate(),
        [state, setState] = useState(initState);
    const [params, setParams] = useState({
        pageSize: 10,
        pageNo: 1,
        userName: '',
        billDate: ''
    });
    const goSearch = () => {
        const userName = form.getFieldValue('userName');
        const billDate = form.getFieldValue('billDate') && form.getFieldValue('billDate').format('YYYY-MM-DD');
        setParams((o) => ({ ...o, userName, billDate }));
    };
    const goDetail = () => {
        navigate(`${BASEDIR}/billDetail`)
    }
    const columns = [
        {
            title: t('menu.information.table.userName'),
            dataIndex: 'userName',
            width: 120,
            ellipsis: true,
        },
        {
            title: t('menu.information.table.endTime'),
            dataIndex: 'endTime',
            width: 200,
            ellipsis: true,
        },
        {
            title: t('menu.information.table.code'),
            dataIndex: 'code',
            width: 200,
            ellipsis: true,
        },
        {
            title: t('menu.information.table.type'),
            dataIndex: 'type',
            width: 200,
            ellipsis: true,
        },
        {
            title: t('menu.information.table.duration'),
            dataIndex: 'duration',
            width: 200,
            ellipsis: true,
        },
        {
            title: t('menu.information.table.cost'),
            dataIndex: 'cost',
            width: 230,
            ellipsis: true,
        },
        // {
        //     title: 'Operation',
        //     key: '',
        //     render: (_, record) => (
        //         <Space size="middle">
        //             <Button type='primary' onClick={goDetail}>Detail</Button>
        //             {/* <span style={{ color: '#316AB9', cursor: 'pointer' }} onClick={goEditList}>see</span> */}
        //         </Space>
        //     ),
        // },
    ];
    const handlePageChange = (page) => {
        setParams(prevParams => ({ ...prevParams, pageNo: page }));
    };
    const handlePageSizeChange = (pageNo, pageSize) => {
        setParams(prevParams => ({ ...prevParams, pageNo, pageSize }));
    };
    const handleReset = () => {
        form.resetFields();
        setParams((prevParams) => ({ ...prevParams, userName: '', billDate: '' }))
    };
    const getRecordList = () => {
        setState(prevState => ({ ...prevState, loading: true }));
        getRecords(params).then(response => {
            let list = response?.data?.records.map((item, index) => ({ //生成唯一key 
                ...item,
                key: `page-${params.pageNo}-item-${index}`
            }))
            setState(o => ({
                ...o,
                recordList: list || [],
                total: response?.data?.total || 0,
                loading: false
            }));
        }).catch(e => {
            messageApi.open({
                type: 'error',
                content: e?.message,
            });
            setState(prevState => ({ ...prevState, loading: false }));
        });
    }
    useEffect(() => {
        getRecordList();
    }, [params, i18n.language])
    return (
        <div className='page-container'>
            <div className={styles.content}>
                <div className={styles.tableCount}>
                    <Row className={styles.titBlock}>
                        <Col span={12}>
                            <div className='custom-title'>{t('menu.information.title')}</div>
                        </Col>
                    </Row>
                    <Row className={styles.titBlock}>
                        <Col span={24}>
                            <Form
                                name="userForm"
                                form={form}
                                className='custom-form-primary'
                                layout='inline'
                                style={{ width: '100%' }}
                            >
                                <Col sm={12} md={8} lg={8}>
                                    <Form.Item label={t('menu.information.form.lable.userName')} name="userName">
                                        <Input type="text" placeholder={t('common.modal.placehoderworkstation')} />
                                    </Form.Item>
                                </Col>
                                <Col sm={12} md={8} lg={8}>
                                    <Form.Item label={t('menu.information.form.lable.Date')} name="billDate">
                                        <DatePicker format="YYYY-MM-DD" allowClear={false} />
                                    </Form.Item>
                                </Col>
                                <Col span={4} className={styles.RightBlcok}>
                                    <Button type='primary' className='custom-btn-primary' onClick={goSearch}>{t('common.modal.button.search')}</Button>
                                    <div onClick={handleReset} className={styles.resert}>
                                        <img src={`${BASEDIR}/images/resert.svg`} alt="" />
                                        <div>{t('common.modal.button.reset')}</div></div>
                                </Col>
                            </Form>
                        </Col>
                    </Row>
                    <Table loading={state.loading} rowKey={'key'} scroll={{ x: '100%' }} className='custom-table' pagination={false} columns={columns} dataSource={state.recordList} />
                    <div className='custom-Pagination'>
                        <Pagination
                            total={state?.total}
                            showSizeChanger
                            showQuickJumper
                            showTotal={(totalNum) => t('common.pagination.totalNum', { totalNum })}
                            align="center"
                            current={params?.pageNo}
                            defaultPageSize={params?.pageSize}
                            onChange={handlePageChange}
                            onShowSizeChange={handlePageSizeChange}
                        />
                    </div>
                </div>

            </div>
            {contextHolder}
        </div>
    )
}